(function($){
    $(document).ready(function(){
        $content = $('#content');
        $aside = $content.parent().find(".aside");
        content_width = $content.find('.content:first').width();
        aside_width = $aside.width();
        $sidebar_button = $('<li id="sidebar-temp-button" class="page-item"><a title="Show Sidebar"><span>Sidebar</span></a></li>')
            .css({
                'float':'right'
            });
        $menu_list = $('#navigation ul.menu');
        $('<div>&raquo;</div>').css({
            'color':'#c3d9ff',
            'vertical-align':'middle',
            'float':'left',
            'height':$('#container .aside:first').height(),
            'width':'8px'
        }).hover(
            function(){
                $(this).css({
                    'backgroundColor':'#e5ecf9',
                    'color':'red'
                });
            },
            function(){
                $(this).css({
                    'backgroundColor':'#fff',
                    'color':'#c3d9ff'
                });
            }
        ).toggle(
            function(){
                new_content_width = content_width + aside_width;
                var change_content_width = function(){
                    $content.find('.content:first').animate({width:new_content_width + 'px'},{duration:"fast"});
                    $aside.hide();
                }
                $aside.animate({width:'0'}, {duration:"fast",step:change_content_width});
                $(this).html("&laquo;");
                var hide_sidebar = function(){
                        $sidebar_button.click();
                };
                $sidebar_button.toggle(function(){
                    $(this).find('span').html('Hide Sidebar');
                    $(this).addClass("current_page_item");
                    button_pos = $(this).offset();
                    $bodycontainer = $('#body-container');
                    $aside.css('width',aside_width + 'px').css({
                        'backgroundColor':'#fff',
                        'border':'1px solid #000',
                        'position':'absolute',
                        'top':button_pos.top + $(this).height() + 4 + 'px',
                        'left':$bodycontainer.offset().left + $bodycontainer.width() - $aside.outerWidth(true) + 'px'
                    }).show();
                    $aside.click(function(e){
                        e.stopPropagation();
                    });
                    $(document).click(hide_sidebar);
                },function(){
                    $sidebar_button.find('span').html('Sidebar');
                    $sidebar_button.removeClass("current_page_item");
                    $aside.hide().css({
                        'width':0,
                        'position':'static',
                        'border':'none',
                        'backgroundColor':'transparent'
                    });
                    $(document).unbind('click', hide_sidebar);
                });
                $menu_list.append($sidebar_button);
            },
            function(){
                var change_content_width = function(){
                    $content.find('.content:first').animate({width:content_width + 'px'},{duration:"fast"});
                }
                $aside.animate({width:aside_width + 'px'}, {duration:"fast",step:change_content_width});
                $(this).html("&raquo;");
                $menu_list.find('#sidebar-temp-button').unbind('click').remove();
            }
        ).insertAfter('#content');
    });
})(jQuery);


